<template>
  <el-dialog
    :title="$t('workOrderMg.oldOrder')"
    :visible="visible"
    close-on-click-modal
    top="10px"
    @close="onClose"
    @open="onOpen"
  >
    <div>
      <div class="r-card-header">{{ $t('workOrderMg.OrdrInfo') }}</div>
      <el-form label-width="80px" class="r-text" :model="workOrderInfo">
        <el-form-item :label="$t('workOrderMg.workOrderId')">
          {{ workOrderInfo.id }}
        </el-form-item>
        <el-form-item :label="$t('workOrderMg.orderName')">
          {{ workOrderInfo.orderName }}
        </el-form-item>
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item :label="$t('workOrderMg.orderType')">
              {{ workOrderInfo.typeName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('workOrderMg.moduleName')">
              {{ workOrderInfo.moduleName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item :label="$t('workOrderMg.createdDate')">
          {{ workOrderInfo.createdDate }}
        </el-form-item>
        <el-form-item :label="$t('workOrderMg.problem')">
          <pre>{{ workOrderInfo.description }}</pre>
        </el-form-item>
        <!-- 上传图片 -->
        <el-form-item :label="$t('workOrderMg.picture')">
          <Rupload :value="workOrderInfo.imagesBusinessId" is-img preview />
        </el-form-item>

        <el-form-item :label="$t('workOrderMg.accessory')">
          <Rupload :value="workOrderInfo.fileBusinessId" preview />
        </el-form-item>
      </el-form>
    </div>
    <br>
    <div>
      <div class="r-card-header">{{ $t('workOrderMg.ReplyLogs') }}</div>
      <div class="chat-box gray-bg">
        <div v-for="chatItem of chatLogs" :key="chatItem.id">
          <div v-if="chatItem.isTime" class="divider-time">
            {{ chatItem.content }}
          </div>
          <template v-else>
            <div
              :class="[
                'chat-item',
                {
                  'mine-chat': chatItem.isNowUser
                }
              ]"
            >
              <!-- <el-avatar :size="38" :src="avatar" /> -->
              <div class="name-to-avatar">
                {{ chatItem.userName[0] }}
              </div>
              <div class="name">
                <!-- {{ `${chatItem.userName}(${chatItem.userAlias})` }} -->
                {{ chatItem.userName }}
              </div>
              <div class="content">
                <template v-if="Number(chatItem.messageType) === 1">
                  <el-image
                    style="max-width: 300px"
                    :src="chatItem.src"
                    :preview-src-list="[chatItem.src]"
                  />
                </template>
                <template v-else-if="Number(chatItem.messageType) === 2">
                  <el-button @click="onDownload(chatItem.fileId)">
                    <svg-icon icon-class="accessory" />
                    {{ chatItem.replyContent }}
                  </el-button>
                </template>
                <template v-else-if="Number(chatItem.messageType) === 3">
                  <r-video :width="300" url="/example/食屎啦.mp4" />
                </template>
                <div v-else class="text">
                  <TextContent :content="chatItem.replyContent" />
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <br>
    <div>
      <div class="r-card-header">{{ $t('workOrderMg.OperateLogs') }}</div>
      <el-form class="r-text op-logs gray-bg">
        <el-form-item v-for="(opItem, index) of operateList" :key="index">
          {{ index + 1 }}. {{ opItem.createdDate }}
          <span class="user-name">
            {{ opItem.userName || opItem.userAlias }}
          </span>
          {{ opItem.action }}
          <span v-if="opItem.changeCode" class="change-content">
            {{ opItem.changeCode }} -> {{ opItem.valueAfter }}
          </span>
        </el-form-item>
      </el-form>
    </div>
    <br>
    <div v-if="workOrderInfo.orderStatusCode === 'statusProcessed'">
      <div class="r-card-header">{{ $t('workOrderMg.ProcessResult') }}</div>
      <el-form class="r-text gray-bg" label-width="80px">
        <el-form-item :label="$t('workOrderMg.handling')">
          {{ workOrderInfo.dealSituationName }}
        </el-form-item>
        <el-form-item :label="$t('workOrderMg.belonging')">
          {{ workOrderInfo.attributiveName }}
        </el-form-item>
        <el-form-item :label="$t('workOrderMg.reason')">
          {{ workOrderInfo.reason }}
        </el-form-item>
        <el-form-item :label="$t('workOrderMg.remark')">
          <pre>
          {{ workOrderInfo.remark }}
          </pre>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import { getWoInfo, getWoOperateList } from '@/api/workOrder'
import { getChatLogs } from '@/api/workOrder'
import { getImgUrl, downloadFileByUrl } from '@/api/file'
import Rupload from '@/components/r-upload'

export default {
  components: { Rupload },
  props: {
    visible: {
      default: false,
      type: Boolean
    },
    workOrderId: {
      default: '',
      type: String
    }
  },

  data() {
    return {
      workOrderInfo: {},
      operateList: [],
      chatLogs: []
    }
  },

  methods: {
    onOpen() {
      this.loadWorkOrderById()
    },
    async loadWorkOrderById() {
      // 工单信息
      const { retData: WoInfo } = await getWoInfo(this.workOrderId)
      this.workOrderInfo = WoInfo || {}
      const { retData: woOperate } = await getWoOperateList(this.workOrderId)
      const { records: operateList } = woOperate || {}
      this.operateList = (operateList || []).reverse()

      const { retData: chatLogData } = await getChatLogs({
        workOrderId: this.workOrderId,
        size: 100,
        current: 1
      })
      const { records: chatLogs } = chatLogData || {}
      if (chatLogs) {
        chatLogs.reverse()
        this.chatLogs = chatLogs.map(item => {
          const { messageType } = item
          if (Number(messageType) === 1) {
            item.src = getImgUrl(item.fileId)
          }
          return item
        })
      }
    },
    onClose() {
      this.$emit('update:visible', false)
    },
    onDownload(id) {
      downloadFileByUrl(id)
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';

.gray-bg {
  background: $grayBgColor;
}

.chat-box {
  height: 200px;
}
.op-logs {
  padding-left: 10px;
  .user-name {
    font-weight: 600;
  }
  .change-content {
    word-wrap: break-word;
  }
}
</style>
